<template lang="">
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 新增角色按钮 -->
        <el-row style="height: 60px">
          <el-button icon="el-icon-plus" size="small" type="primary" @click="showAddDialog">新增角色</el-button>
        </el-row>
        <!-- 表格table组件 -->
        <el-table :data="roleList" border style="width: 100%">
          <el-table-column prop="title" label="角色名称" width="180px" />
          <el-table-column prop="description" label="角色描述" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button size="medium" type="primary" @click="assignPermFn(row.id)">分配权限</el-button>
              <el-button size="medium" @click="editPermFn(row.id)">编辑</el-button>
              <el-button size="medium" type="danger" @click="delRoleFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <!-- sizes, prev, pager, next, jumper -->
        <el-row type="flex" justify="center">
          <el-pagination
            :current-page="page"
            :page-size="pagesize"
            layout="prev,pager,next"
            :total="total"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
      <!-- 分配权限组件弹窗 -->
      <assignPerm ref="assignPerm" :is-show-dialog.sync="isShowDialog" @update="getRoleList" />
      <!-- 编辑权限组件 -->
      <assignEdit ref="assignEdit" :show-edit-dialog.sync="showEditDialog" @update="getRoleList" />
    </div>
  </div>
</template>
<script>
// 角色列表接口
import { roleList, getRoleCount, delRole } from '@/api/rolemanage'
// 分配权限组件
import assignPerm from './components/assign-perm'
// 编辑权限组件
import assignEdit from './components/assign-edit'
export default {
  components: {
    assignPerm, assignEdit
  },
  data() {
    return {
      roleList: [], // 角色列表
      page: 1, // 当前页面
      pagesize: 3, // 每页请求数量
      total: 0, // 请求回来的总数量
      isShowDialog: false, // 分配权限弹窗
      id: null,
      showEditDialog: false // 编辑权限弹窗
    }
  },
  async created() {
    // 获取角色列表数据
    this.getRoleList()
  },
  methods: {
    async getRoleList() {
      // 获取角色列表的总数量
      this.total = await getRoleCount()
      // console.log(48,this.total);
      // 调用获取角色列表接口 传递参数：
      // 每页请求的数量_limit  和 每页第一条数据的索引号
      const start = (this.page - 1) * this.pagesize
      this.roleList = await roleList({
        _limit: this.pagesize, _start: start
      })
      // console.log('32角色列表',this.roleList);
    },
    // 切换页码的时候 重新请求数据
    changePage(newPage) {
      // console.log(59,newPage);
      // 把切换的页码 赋值给当前页面page
      this.page = newPage
      // 刷新页面 重新获取角色列表数据
      this.getRoleList()
    },

    // 点击分配权限按钮
    assignPermFn(id) {
      // 保存id
      this.id = id
      // 弹窗分配权限弹窗
      this.isShowDialog = true
      // 获取组件getPermById方法 传递id
      this.$refs.assignPerm.getPerm(id)
    },
    // 删除角色按钮
    async delRoleFn(id) {
      // 二次询问是否删除角色
      await this.$confirm('确定删除角色吗？')
      // 调用删除角色接口
      await delRole(id)
      // 如果删除那一页只剩下最后一条数据 被你删除了 就跳转回上一页
      if (this.page > 1 && this.getRoleList.length === 1) {
        this.page--
      }
      // 刷新角色列表
      this.getRoleList()
    },
    // 编辑权限按钮
    editPermFn(id) {
      // 显示弹窗
      this.showEditDialog = true
      // 获取编辑组件 调用里面的getPermDetail方法 传递id参数
      this.$refs.assignEdit.getPermDetail(id)
    },

    // 新增角色按钮
    showAddDialog() {
      // 显示弹窗
      this.showEditDialog = true
    }
  }
}
</script>
<style lang="">

</style>
